<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>金地天地云墅 全家福线上报名</title>
	<link rel="stylesheet" href="/assets/activity/jindi-2/css/reset.css">
	<link rel="stylesheet" href="/assets/activity/jindi-2/css/swiper.min.css">
	<link rel="stylesheet" href="/assets/activity/jindi-2/css/animate.min.css">
	<link rel="stylesheet" href="/assets/activity/jindi-2/css/quanjiafu.css">
	<script type="text/javascript" src="/assets/activity/jindi-2/js/rem.js"></script>
</head>
<body>
<div class="swiper-container">
	<div class="player active">
		<img src="/assets/activity/jindi-2/img/palyer.png" alt="" class="player-img">
		<audio src="http://assets-cdn.udfang.com/music/20170616/h5-jd-bgm-2.mp3" autoplay="autoplay" loop="loop" id="media"></audio>
	</div>
	<div class="arrow">
		<img src="/assets/activity/jindi-2/img/arrow-right.png" alt="" class="">
		<span>向左滑动</span>
	</div>
	<div class="swiper-wrapper">
		<div class="swiper-slide page1">
			<div class="light">
				<img src="/assets/activity/jindi-2/img/light1.png" alt="" class="light1">
				<img src="/assets/activity/jindi-2/img/light2.png" alt="" class="light2">
				<img src="/assets/activity/jindi-2/img/light3.png" alt="" class="light3">
			</div>
			<div class="car">
				<img src="/assets/activity/jindi-2/img/car1.png" alt="" class="car1 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s">
				<img src="/assets/activity/jindi-2/img/car2.png" alt="" class="car2 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="0.4s">
			</div>
			<div class="text text-left-bottom">
				<p class="ani"  swiper-animate-effect="fadeIn" swiper-animate-duration=".5s" swiper-animate-delay="1s">你的梦想越来越大</p>
				<p class="ani"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">世界越来越广</p>
				<div class="english">
					<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="2s">YOUR DREAMES ARE GETTING BIGGER AND BIGGER</p>
					<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="2.5s">THE WORLD IS GETTING WIDER AND WIDER</p>
				</div>
			</div>
		</div>
		<div class="swiper-slide page2">
			<img src="/assets/activity/jindi-2/img/light2-1.png" alt="" class="light light4">
			<div class="text text-left-bottom">
				<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s">他们的世界</p>
				<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">只有你一个牵挂</p>
				<div class="english">
					<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s">THEIR WORLD, OMLY YOU A CARE</p>
				</div>
			</div>
		</div>
		<div class="swiper-slide page3">
			<img src="/assets/activity/jindi-2/img/leaf1.png" alt="" class="leaf1">
			<img src="/assets/activity/jindi-2/img/leaf2.png" alt="" class="leaf2">
			<img src="/assets/activity/jindi-2/img/leaf3.png" alt="" class="leaf3">
			<img src="/assets/activity/jindi-2/img/leaf4.png" alt="" class="leaf4">
			<img src="/assets/activity/jindi-2/img/leaf5.png" alt="" class="leaf5">
			<img src="/assets/activity/jindi-2/img/leaf6.png" alt="" class="leaf6">
			<div class="text text-left-up">
				<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s">你的脚步越来越快</p>
				<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">行程越来越满</p>
				<div class="english">
					<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s">YOUR FOOTSTEPS ARE GETTING FASTER AND FASTER</p>
					<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">THE TRIP IS GETTING MORE AND MORE FULL</p>
				</div>
			</div>
		</div>
		<div class="swiper-slide page4">
			<img src="/assets/activity/jindi-2/img/muma.png" alt="" class="muma">
			<div class="text text-left-bottom">
				<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s">他们的日历</p>
				<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">只有你回家的日子</p>
				<div class="english">
					<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s">THEIR CALENDAR</p>
					<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">ONLY THW DAYS OF YOUR HOME</p>
				</div>
			</div>
		</div>
		<div class="swiper-slide page5">
			<img src="/assets/activity/jindi-2/img/star.png" alt="" class="star">
			<div class="text text-white">
				<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">你的问候常常都有</p>
				<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s">陪伴却越来越少</p>
				<div class="english">
					<p  class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">YOUR GREETINGS OFTEN HAVE</p>
					<p  class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="2s">ACCOMPANIED BY LESS AND LESS</p>
				</div>
			</div>
		</div>
		<div class="swiper-slide page6">
			<img src="/assets/activity/jindi-2/img/page6-bg.png" alt="" class="page6-bg">
			<img src="/assets/activity/jindi-2/img/snow.png" alt="" class="snow">
			<img src="/assets/activity/jindi-2/img/snow.png" alt="" class="snow2">
			<div class="text text-white text-left-bottom">
				<p  class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">他们总说： </p>
				<p  class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s">在家一切都好，不用挂念 </p>
				<div class="english">
					<p   class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">THEY ALWAYS SAID: AT HOME EVERTHING IS GOOD,DO NOT MISS</p>
				</div>
			</div>
		</div>
		<div class="swiper-slide page7">
			<div class="text">
				<p  class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">想要陪陪父母，</p>
				<p  class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s">却总觉得时间还长</p>
				<div class="english">
					<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">WANT TO ACCOMPANY HER PARENTS , </p>
					<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="2s">BUT ALWAYS FEEL THAT TIME IS ALSO LONG</p>
				</div>
			</div>
		</div>
		<div class="swiper-slide page8">
			<div class="flowers">
				<img src="/assets/activity/jindi-2/img/flower1.png" alt="" class="flower1">
				<img src="/assets/activity/jindi-2/img/flower2.png" alt="" class="flower2">
				<img src="/assets/activity/jindi-2/img/flower3.png" alt="" class="flower3">
				<img src="/assets/activity/jindi-2/img/flower4.png" alt="" class="flower4">
				<img src="/assets/activity/jindi-2/img/flower5.png" alt="" class="flower5">
			</div>
			<div class="text">
				<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">但一眨眼</p>
				<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s">时间就这么过去了…</p>
				<div class="english">
					<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">WANT TO ACCOMPANY HER PARENTS,</p>
					<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="2s">BUT ALWAYS FEEL THAT TIME IS ALSO LONG</p>
				</div>
			</div>
		</div>
		<div class="swiper-slide page9">
			<img src="/assets/activity/jindi-2/img/reqi1.png" alt="" class="reqi1">
			<img src="/assets/activity/jindi-2/img/reqi2.png" alt="" class="reqi2">
			<div class="text">
				<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">回家吧</p>
				<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s">别让团圆一直等待</p>
				<div class="english">
					<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">GO HOME</p>
					<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="2s">DO NOT LET REUNION HAS BEEN WAITING</p>
				</div>
			</div>
		</div>
		<div class="swiper-slide page10">
			<form class="enroll">
				<h2>全家福报名</h2>
				<div class="row">
					<label for="">姓名：</label>
					<input type="text" id="username">
				</div>
				<div class="row">
					<label for="">手机：</label>
					<input type="number" id="mobile">
				</div>
				<a href="javascipt:;" id="sub" class="submit">报名</a>
			</form>
			<div class="cover">
				<p>阅读数：<span class="num"><?php echo $view_nums;?></span>	</p >
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="/assets/activity/jindi-2/js/swiper.min.js"></script>
<script type="text/javascript" src="/assets/activity/jindi-2/js/swiper.animate1.0.2.min.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	wx.config(<?php echo $js->config(array('onMenuShareTimeline','onMenuShareAppMessage'), false) ?>);
	wx.ready(function () {
		wx.onMenuShareTimeline({
			title: '他们的世界只有你一个牵挂', // 分享标题
			desc: '别让团圆一直等待。', // 分享描述
			link: 'http://udfang.com/activity/html5two', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl: 'http://udfang.com/assets/activity/jindi-2/img/share.jpg', // 分享图标
		});
		wx.onMenuShareAppMessage({
			title: '他们的世界只有你一个牵挂', // 分享标题
			desc: '别让团圆一直等待。', // 分享描述
			link: 'http://udfang.com/activity/html5two', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl: 'http://udfang.com/assets/activity/jindi-2/img/share.jpg', // 分享图标
		});
	})
</script>
<script>
	var swiper = new Swiper('.swiper-container', {
		pagination: '.swiper-pagination',
		onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
			swiperAnimateCache(swiper); //隐藏动画元素
			swiperAnimate(swiper); //初始化完成开始动画
		},
		onSlideChangeEnd: function(swiper){
			swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
		}
	});


	// 提交按钮
	$("#sub").on("click",function(){
		var username = $("#username").val();
		var mobile = $("#mobile").val();
		if (mobile == "") {
			alert("手机号不能为空！");
			return false;
		}else if(mobile != ""){
			var reg = /^1[34578]\d{9}$/;
			if(!reg.test(mobile)){
				alert("请输入正确的手机号码！");
				return false;
			}
		}
		var url = "/Activity/html5reg";
		$.ajax({
			type: "get",        //数据提交的方式(get/post)
			url: url,            //数据提交请求的页面
			dataType:"json",
			data: {              //提交的参数
				'mobile':mobile,
				'username':username
			},
			//回调函数
			success: function(rst){
				console.log(rst);
				if(rst.status == "ok"){
					$(".page10").append('<p class="alert">报名成功<button class="close">确定</button></p>');
					$('.close').on("click",function(){
						$(this).parent(".alert").hide();
						window.location.href=window.location.href;
					})
				}else{
					alert("报名失败，请稍后再试");
				}
			}
		});

	})
	// 播放器
	document.addEventListener("WeixinJSBridgeReady", function () {
		document.getElementById('media').play();
	}, false);
	$('.player').on("click",function(){
		$(this).toggleClass('active');
		if($('.player').hasClass('active')){
			$(this).find('audio').attr("src","http://assets-cdn.udfang.com/music/20170616/h5-jd-bgm-2.mp3");
		}else{
			$(this).find('audio').attr("src","");
		}
	})
</script>
</body>
</html>